<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style>
        #float p {
            overflow: auto;
            border: 1px solid red;
        }
        #float img {
            float: left;
            width: 270px;
            height: 200px;
            margin-left: 15px;
            margin-right: 15px;
        }
        #flow-root p {
            display: flow-root;
            border: 1px solid red;
        }
        #flow-root img {
            float: left;
            width: 270px;
            height: 200px;
            margin-left: 15px;
            margin-right: 15px;
        }
    </style>
</head>
<body>
<div id="float">
    <p><img src="../resources/images/paris.jpg">Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et
        dictum interdum, nisi lorem egestas odio, vitae scelerisque enim
        ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
        auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris
        ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
        convallis urna a lacus interdum ut hendrerit risus congue. Nunc
        sagittis dictum nisi.</p>
    <p style="clear: left">new paragraph</p>
</div>
<hr>
<h3>display: flow-root</h3>
<p>display: flow-root属性使容器清除浮动的副作用</p>
<div id="flow-root">
    <p><img src="../resources/images/paris.jpg">Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et
        dictum interdum, nisi lorem egestas odio, vitae scelerisque enim
        ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
        auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris
        ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
        convallis urna a lacus interdum ut hendrerit risus congue. Nunc
        sagittis dictum nisi.</p>
    <p>new paragraph</p>
</div>
</body>
</html>